<template>
  <!-- 短信发送查询 -->
  <section class="page message-send-record-query">
    <data-form :model="searchModel" @onSearch="refreshData" :rules="rules" :page="pageService" @handleResetForm="follFeedback">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber" ></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model.trim="searchModel.personalNo" ></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model.trim="searchModel.personalName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model.trim="searchModel.idCard" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="客群ID" prop="customersCode">
          <el-input v-model="searchModel.customersCode" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model.trim="searchModel.mobileNo" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="分案时间" prop="caseTurnTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.caseTurnTime" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="队列名称" prop="queueName">
          <el-input v-model="searchModel.queueName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="分案类型" prop="turnType">
          <el-select v-model="searchModel.turnType" placeholder="请选择" clearable>
            <el-option
              v-for="{ index, name, code } in $dict.getDictData(
                'TurnType'
              )"
              :key="index"
              :label="name"
              :value="code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="经办代号" prop="currentCollectorName">
          <el-input v-model="searchModel.currentCollectorName" maxlength="20"></el-input>
        </el-form-item> -->
        <el-form-item label="经办代号" prop="currentCollectorCode">
          <el-input v-model="searchModel.currentCollectorCode" maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <span type="text" class="case-number" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="caseTurnTime" label="分案时间" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip :formatter="row => $filter.dateTimeFormat(row.caseTurnTime)"></el-table-column>
        <el-table-column prop="turnType" label="分案类型" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip
         :formatter="(row) => $filter.dictConvert(row.turnType,'TurnType')" ></el-table-column>
        <el-table-column prop="distributeReason" label="重分案原因" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="customersCode" label="客群ID" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="queueCategory" label="客群渠道" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip :formatter="(row) => $filter.dictConvert(row.queueCategory,'QueueCategory')" >
        </el-table-column>
        <el-table-column prop="queueName" label="队列" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="currentCollectorCode" label="分案经办代号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="caseMoney" label="分案总余额" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="entityAccountNum" label="实体账户数" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="recombinationReason" label="重组原因" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operatorRealName" label="操作员" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
      </template> 
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Auth, Layout, Dependencies } from "~/core/decorator"
import { PageService } from "~/utils/page.service"
import DataForm from "~/components/common/data-form.vue"
import DataBox from "~/components/common/data-box.vue"
import { SortService } from "~/utils/sort.service"
import NumberRange from "~/components/common/number-range.vue"
import { CaseTurnRecordService } from "~/services/domain-service/case-turn-record.service"
import { namespace, Getter, Mutation,State } from "vuex-class"
import { MENU_CHANNEL } from "../../config/enum.config"

@Layout("workspace")
@Component({
  components: {
    NumberRange
  }
})
export default class MessageSendRecordQuery extends Vue {
  @Dependencies(PageService) private pageService: PageService
  @Dependencies(SortService) private sortService: SortService
  @Dependencies(CaseTurnRecordService) private CaseTurnRecordService: CaseTurnRecordService
  @State private principalList: any
  private searchModel: any = {
    caseTurnTime: { max: "", min: "" },
    caseNumber: '',
    personalNo: '',
    personalName: '',
    idCard: '',
    customersCode: '',
    mobileNo: '',
    queueName: '',
    turnType: '',
    currentCollectorName: '',
    currentCollectorCode: '',
  }

  private dataSet: any[] = []

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() > Date.now();
    },
  }

  // 表单验证规则
  private rules = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };

  private refreshData() {
    this.CaseTurnRecordService
      .getCaseTurnHistory(this.paramsHandler(), this.pageService)
      .subscribe(data => (this.dataSet = data))
  }

  private follFeedback() {
    this.searchModel.caseTurnTime = { min: "", max: "" }
  }

  private paramsHandler() {
    const params = { ...this.searchModel }
    params.caseTurnTimeMax = this.$filter.dateRanageFormat(
      this.searchModel.caseTurnTime
    ).end;
    params.caseTurnTimeMin = this.$filter.dateRanageFormat(
      this.searchModel.caseTurnTime
    ).start;
    delete params.caseTurnTime;
    return params;
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    // this.$router.openCaseDetail(row.id, {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenCaseList: true,
      hiddenAction: true
    })
  }
  private mounted() {
    this.refreshData()
  }
}
</script>
<style lang="less" scoped>
  .case-number{
    cursor: pointer;
    color: #409EFF;
  }
</style>
